<script setup>
import Header from './components/Header.vue'
import SetNameDialog from '@/components/setNameDialog.vue'
import { onMounted, ref } from 'vue'

const setNameDialogRef = ref(null)

onMounted(() => {
  if (
    localStorage.getItem('name') == null || localStorage.getItem('name') == '') {
    setNameDialogRef.value.show()
  }
})
</script>


<template>
  <div class='flex flex-col h-screen overflow-hidden'>
    <Header></Header>
    <div class='flex-1 router-wrap-box overflow-hidden relative'>
      <router-view></router-view>
    </div>
    <set-name-dialog ref='setNameDialogRef'></set-name-dialog>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}

.ivu-card-body {
  width: 100%;
  height: 100%;
}

.router-wrap-box {
  height: calc(100vh - 50px);
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(3, 105, 161, 0.2);
  background: rgb(2 132 199);
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(3, 105, 161, 0.2);
  border-radius: 0;
  background: rgba(3, 105, 161, 0.1);
}

</style>
